<template>
  <div class="goodsadd">
    <div class="header">
      <!-- 打卡 -->
      <router-link to="/Backstage" class="shou">首页</router-link>/ 商品管理 / 商品列表
    </div>
    <el-alert title="添加商品信息" type="info" style="margin-top:30px" center show-icon></el-alert>
    <!-- 步骤条 -->
    <div class="buzhou">
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="步骤1"></el-step>
        <el-step title="步骤2"></el-step>
        <el-step title="步骤3"></el-step>
        <el-step title="步骤4"></el-step>
        <el-step title="步骤5"></el-step>
      </el-steps>
      <el-tabs
        :tab-position="tabPosition"
        style="height: 400px;margin-top:20px;overflow: scroll;overflow-x: auto;"
        @tab-click="next"
      >
        <el-tab-pane label="基本信息">
          <el-form :label-position="labelPosition" label-width="80px" :model="fom">
            <el-form-item label="商品名称">
              <el-input v-model="fom.name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格">
              <el-input v-model="fom.name"></el-input>
            </el-form-item>
            <el-form-item label="商品重量">
              <el-input v-model="fom.name"></el-input>
            </el-form-item>
            <el-form-item label="商品数量">
              <el-input v-model="fom.region"></el-input>
            </el-form-item>
            <el-form-item label="商品分类">
              <el-cascader
                v-model="value"
                :options="options"
                :props="{ value:'cat_id',expandTrigger: 'hover',label: 'cat_name' }"
              ></el-cascader>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品参数">
          <div v-if="this.value.length == 3">
            <div v-for="(item,index) in shuju" :key="index">
              <div class="ban">{{shuju[index].attr_name}}</div>
              <span v-for="(ite,inde) in shuju[index].attr_vals.split(',')" :key="inde">
                <el-tag class="ge">{{ite}}</el-tag>
              </span>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="商品属性">
          <div v-if="this.value.length == 3">
            <div v-for="(item,index) in ba" :key="index">
              <p class="titel">{{item.attr_name}}</p>
              <input type="text" v-model="item.attr_vals" class="inpu">
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="商品图片">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-tab-pane>
        <el-tab-pane label="商品内容">
          <el-row>
            <quill-editor
              v-model="content"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @change="onEditorChange($event)"
            ></quill-editor>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { tjsp, spsjlb, dong } from "../../api/api.js";
import { quillEditor } from "vue-quill-editor";
import axios from "axios";
export default {
  name: "goodsadd",
  data() {
    return {
      active: 0,
      tabPosition: "left",
      labelPosition: "top",
      fom: {
        name: "",
        region: "",
        type: ""
      },
      value: "",
      options: [],
      content: "",
      editorOption: {},
      fileList: [],
      shuju: [],
      ba:[]
    };
  },
  methods: {
    xin() {
      spsjlb({
        type: 3
      }).then(res => {
        console.log(res);
        if (res.data.meta.status >= 200 && res.data.meta.status < 300) {
          this.options = res.data.data;
        }
        console.log(this.options);
      });
    },
    //添加商品
    tian() {
      tjsp({
        goods_name: this.form.name,
        goods_cat: ",",
        goods_price: this.form.price,
        goods_number: this.form.number,
        goods_weight: this.form.weight,
        goods_introduce: this.form.introduce,
        // pics:
        attrs: this.form.attrs
      }).then(res => {
        if (res.data.meta.status >= 200 && res.data.meta.status < 300) {
          // this.options=
        }
        console.log(res);
      });
    },
    open4() {
      this.$message.error("请选择商品的三级分类");
    },
    //静动
    jing() {
      dong({
        id: this.value[2],
        sel: "many"
      }).then(res => {
        console.log(333333333333333, res);
        if (res.data.meta.status >= 200 && res.data.meta.status < 300) {
          this.shuju = res.data.data;
        }
      });
    },
    jinga() {
      dong({
        id: this.value[2],
        sel: "only"
      }).then(res => {
        console.log(333333333333333, res);
        if (res.data.meta.status >= 200 && res.data.meta.status < 300) {
          this.ba = res.data.data;
          console.log(9999999999999999, this.ba);
        }
      });
    },
    // 下一步
    next(val) {
      this.active = parseInt(val.index);
      if (this.value.length == 3) {
        this.jing();
        this.jinga();
      } else {
        this.open4();
      }
    },
    //图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    //富文本编辑器
    onEditorBlur(editor) {
      //失去焦点事件
    },
    onEditorFocus(editor) {
      //获得焦点事件
    },
    onEditorChange({ editor, html, text }) {
      //编辑器文本发生变化
      //this.content可以实时获取到当前编辑器内的文本内容
      console.log(this.content);
    }
  },
  created() {
    this.xin();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.goodsadd {
  height: 832px;
  width: 1620px;
  background-color: #fff;
  border: 1px solid #e9eef3;
  box-shadow: 0 0 10px #ccc;
  border-radius: 5px;
  font-size: 14px;
  padding: 20px;
  overflow: scroll;
  overflow-x: auto;
}
.header {
  color: #606266;
  letter-spacing: 2px;
}
.shou {
  font-weight: bold;
  color: black;
}
.buzhou {
  margin-top: 10px;
}
.ban {
  font-size: 16px;
}
.ge {
  margin: 30px 10px;
}
.inpu{
   height: 35px;
   width: 95%;
   margin: 30px 0;
   border: 1px solid rgb(223, 216, 216);
   border-radius: 5px;
   padding-left: 15px;
}
.inpu:hover{
  border: 1px solid rgb(189, 186, 186);
}
</style>
